<template>
  <div class="login-page u-f">
    <div class="login-box">
      <h2 class="header-h2">blue sky 的低代码平台</h2>
      <a-form
        :model="formState"
        @finish="handleFinish"
        @finishFailed="handleFinishFailed"
      >
        <a-form-item>
          <a-input v-model:value="formState.user" placeholder="Username">
            <template #prefix
              ><UserOutlined style="color: rgba(0, 0, 0, 0.25)"
            /></template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input
            v-model:value="formState.password"
            type="password"
            placeholder="Password"
          >
            <template #prefix
              ><LockOutlined style="color: rgba(0, 0, 0, 0.25)"
            /></template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button
            type="primary"
            html-type="submit"
            shape="round"
            :disabled="formState.user === '' || formState.password === ''"
          >
            登录
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts">
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface'
import { defineComponent, reactive } from 'vue'
import { useRouter } from 'vue-router'

const Login = () => {
  const router = useRouter()
  interface FormState {
    user: string
    password: string
  }
  const formState: FormState = reactive({
    user: 'bluesky',
    password: '10086',
  })
  const handleFinish = () => {
    router.replace('/my-app')
  }
  const handleFinishFailed = (errors: ValidateErrorEntity<FormState>) => {
    console.log(errors)
  }
  return {
    formState,
    handleFinish,
    handleFinishFailed,
  }
}

export default defineComponent({
  name: 'Login',
  components: {
    UserOutlined,
    LockOutlined,
  },
  setup() {
    return {
      ...Login(),
    }
  },
})
</script>

<style lang="less" scoped>
.login-page {
  height: 100vh;
  background: linear-gradient(to right, #6dd5ed, #2193b0);
}
.login-box {
  width: 300px;
  margin: auto;
  padding: 40px 30px;
  box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.5);
  .header-h2 {
    color: #ffffff;
    margin-bottom: 20px;
  }
}
</style>

<style>
.login-box input:-webkit-autofill {
  -webkit-text-fill-color: #333333;
  background-color: transparent;
  transition: background-color 50000s ease-in-out 0s;
}
</style>